<template>
  <div> 
    <mt-header fixed title="单项赛个人报名">
      <mt-button icon="back" @click='$router.back(-1)' slot="left"></mt-button>
    </mt-header>
    <div style="height:40px;"></div>
    <div class="top-title"><i class="gray">比赛名称: </i>2019长沙岳麓区第N届羽毛球邀请赛</div>
    <div class="top-title"><i class="gray">比赛组别：</i>青年组 - 20至30岁</div>
    <step current=4 :stepArr="stepArr"></step>
    <div>  
      <div class="f16 m10 fwb">选择搭档</div>      
      <div class="field-list">
        <div class="field-item open" v-for="(item, index) in dataList">
            <div class="field-item-in" >
              <span class="field-item-in-l gray">{{item.label}}</span>
              <div class="field-item-in-r tr">{{ getTxt(item.value) }}</div> 
            </div>
            <div class="field-item-box">
              <div style="background:#f6f6f6; margin:5px 10px; " v-for="(p, i) in item.list" >
                <p style="display:flex; padding: 0 7px;"> 
                  <popup-radio style="flex:1; width: 0;" v-model="p.certType" :options='certList' title="证件类型"></popup-radio>
                  <input type="text" style="flex:1;" v-model="p.certNo" placeholder="证件号码">
                </p>
                <p style="display:flex; padding: 0 7px;">
                  <input type="text" style="flex:1; width: 10px;" v-model="p.name" placeholder="姓名">
                  <popup-radio style="flex:1; " v-model="p.size" :options='size' title="衣码"></popup-radio>
                  <input type="text" style="flex:2; " v-model="p.mobile" placeholder="手机号">
                </p>
                <p style="display:flex; padding: 0 0 0 7px;">
                  <popup-radio style="flex:1; " v-model="p.sex" :options='sexArr' title="性别"></popup-radio>
                  <popup-age style="flex:1; " v-model="p.age" title="年龄"></popup-age>
                  <span  style="flex:2; display: flex; text-align: center;  align-items: center; line-height: 30px;" >
                    <i style="flex:1; background:#26a2ff; color:#fff;" @click="popupVisible = true">选择搭档</i>
                    <i style="flex:1; background:#ddd; color:#999; ">验证</i>
                  </span>
                </p>
              </div>
            </div>
        </div>
      </div> 
      <div style="display: flex; margin:10px;">        
        <mt-button style="flex:1;" @click='$router.push("/enroll/single/step3")' plain class="mr10" type="primary">上一步</mt-button>
        <mt-button style="flex:1;" @click='$router.push("/enroll/single/step5")' type="primary">下一步</mt-button>
      </div>
    </div>

    <mt-popup v-model="popupVisible" modal=false style="width:100%; height:100%;">
      <div class="pop-page">
        <div class="pop-page-title"><i class="pop-page-title-side fa fa-remove" @click="popupVisible = false"></i><i class="pop-page-title-center">选择搭档</i><i class="pop-page-title-side"></i></div>
        <div class="pop-page-content">
          <ul>
            <li v-for="(item, index) in memberList">
              <div @click="memberSel = item.id;" class="d-flex p10">
                <div class="f-auto f14 pl10">
                  {{item.name}}
                </div>
                <div v-if="memberSel == item.id" class="fa fa-dot-circle-o mr20 f18 blue"></div>
                <div v-else class="fa fa-circle-o mr20 f18 gray"></div>
              </div> 
            </li>
          </ul>
        </div>
        <div class="pop-page-bottom"><i class="gray6" @click="popupVisible = false">取消</i><i class="blue" @click="popupVisible = false">确定</i></div>
      </div>
    </mt-popup>

  </div>
</template>

<script>
import step from '@/components/step'
import popupRadio from '@/components/popupRadio'
import popupAge from '@/components/popupAge'

export default { 
  components:{
    step,popupRadio,popupAge
  },
  data () {
    return {
      stepArr:['填写信息','选择俱乐部','选择项目','选择搭档','报名预览','支付完成'],
      popSex:false,
      popAge:false,
      currSex:null,
      currAge:null,
      maxHeight:"500px",
      dataList:[
        {
          label: '男单',
          value: 0,
          list: []
        },
        {
          label: '男双',
          value: 1,
          list: [{'name':'','sex':'','age':'','certType':'','certNo':'','mobile':''}]
        },
        {
          label: '3V3',
          value: 2,
          list: [{'name':'','sex':'','age':'','certType':'','certNo':'','mobile':''},{'name':'','sex':'','age':'','certType':'','certNo':'','mobile':''}]
        }
      ], 
      certList:[{value:"1",name:"身份证"},{value:"2",name:"学生证"},{value:"3",name:"港澳通行证"},{value:"4",name:"护照"}],
      sexArr:[{value:'male',name:'男'},{value:'female',name:'女'}],
      size:[{value:'x',name:''},{value:'female',name:'女'}],
      popupVisible:false,
      memberList:[
        { 
          "id":1, 
          "name":"独孤求败"
        },
        { 
          "id":2, 
          "name":"张无忌"
        },
        { 
          "id":3, 
          "name":"李小龙"
        },
        { 
          "id":4, 
          "name":"迈克杰克逊"
        },
        { 
          "id":5, 
          "name":"东方不败"
        }, 
        { 
          "id":6, 
          "name":"灭绝师太"
        }, 
        { 
          "id":7, 
          "name":"天山童姥"
        }, 
        { 
          "id":8, 
          "name":"赤练仙子"
        }, 
        { 
          "id":9, 
          "name":"桃花岛主"
        }, 
        { 
          "id":10, 
          "name":"五毒教主"
        }
      ],
      memberSel:"",
    }
  },
  mounted(){
    this.height = (document.documentElement.clientHeight - 76) + "px"; 
  },
  methods:{
    getTxt(n){
      if(n > 0){
        return n + "位搭档";
      }else{
        return "无搭档";
      }
    }
  }
}
</script>
